<template>
	<view class="content">
		<view class="hz">
			<view class="menus">
				<view :class="['item',status===item.id?'selected':'']" v-for="item in menus" @tap="changeMenu(item.id)">
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="type">
				<text :class="['type-item',index==typeIndex?'selected-item':'']" v-for="(item,index) in types" @tap="changeType(index)">{{item.name}}</text>
			</view>
		</view>
		<!-- 主体 -->
		<view class="main">
			<view class="item" v-for="(item,index) in orderList">
				<view class="info1">
					<view class="left">
						<text>{{item.typeDesc}}</text>
					</view>
					<view class="right">
						<text>{{item.statusDesc}} ></text>
					</view>
				</view>
				<view class="info2">
					<view class="time">
						<image src="/static/order/yy.png" mode="widthFix"></image>
						<text class="text1">{{item.createtime}}</text>
					</view>
					<view class="addr1">
						<view class="flag1"></view>
						<text class="text1">{{item.start_addr}}</text>
					</view>
					<view class="addr2">
						<view class="left">
							<view class="flag2"></view>
							<text class="text1">{{item.end_addr}}</text>
						</view>
						<view class="right">
							<text class="price">
								<text>预估{{item.total}}元</text>
							</text>
						</view>
					</view>
				</view>
				<view class="info3">
					<view class="left"></view>
					<view class="right">
						<text class="text1" @tap="goNext(`/pages/order/detail?id=${item.order_sn}`)">查看详情</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/common/request";

  export default {
		data() {
			return {
				status: '',
        orderList:[],//订单列表
				menus: [
					{id:'',name:'全部订单'},
					{id: 0,name:'待支付'},
					{id: 1,name:'进行中'},
					{id: 2,name:'已完成'},
				],
				type: 1,
        typeIndex:0,
				types: [
					{id: 1,name:'送货'},
					{id: 2,name:'搬家'},
					{id: 3,name:'长途大车'},
					{id: 4,name:'打车'},
					{id: 5,name:'顺风车'},
					{id: 6,name:'豪华车'},
				],
				list: [
					{time:'03月23日 09:43',addr1:'杭州中海钱塘山水-北门',addr2:'浙江省儿保医院挂号服务中心'},
					{time:'03月23日 09:43',addr1:'杭州中海钱塘山水-北门',addr2:'浙江省儿保医院挂号服务中心'},
					{time:'03月23日 09:43',addr1:'杭州中海钱塘山水-北门',addr2:'浙江省儿保医院挂号服务中心'},
					{time:'03月23日 09:43',addr1:'杭州中海钱塘山水-北门',addr2:'浙江省儿保医院挂号服务中心'},
					{time:'03月23日 09:43',addr1:'杭州中海钱塘山水-北门',addr2:'浙江省儿保医院挂号服务中心'}
				],
			}
		},
    onLoad() {
      this.getList()
    },
		methods: {
      getList(){
        request({
          url:'/d/order/index',
          data:{
            page:1,
            pagesize:9999,
            type:this.types[this.typeIndex].id
          }
        }).then(res=>{
          this.orderList = res.data.list
        })
      },
			//切换菜单
			changeMenu(status){
				if(this.status===status) return
				this.status = status
			},
			//切换类型
			changeType(type){
        this.typeIndex = type;
        this.getList();
			},
			//跳转
			goNext(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-bottom: 100rpx;
		.hz{
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			padding-top: 30rpx;
			height: 165rpx;
			background-color: #fff;
			.menus{
				display: flex;
				.item{
					width: 25%;
					color: #AAAAAA;
					font-size: $uni-font-size-lg;
					text-align: center;
					line-height: 40rpx;
				}
				.selected{
					text{
						font-weight: bold;
						display: inline-block;
						color: #000;
						padding-bottom: 20rpx;
						border-bottom: 5rpx solid #000;
					}
				}
			}
			.type{
				padding: 30rpx;
				.type-item{
					line-height: 40rpx;
					padding: 5rpx 20rpx;
					background-color: #F6F6F6;
					border-radius: 10rpx;
					margin-right: 20rpx;
					font-size: $uni-font-size-sm;
					font-weight: bold;
					color: #838383;
				}
				.selected-item{
					background-color: #F2EEFF;
					color: #9880EA;
				}
			}
		}
		.main{
			margin-top: 200rpx;
			padding: 20rpx;
			.item{
				padding: 30rpx 30rpx 20rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				.info1{
					display: flex;
					.left{
						font-size: $uni-font-size-lg;
						font-weight: bold;
					}
					.right{
						margin-left: auto;
						color: #F75359;
					}
				}
				.info2{
					margin-top: 30rpx;
					padding-bottom: 30rpx;
					line-height: 40rpx;
					border-bottom: 1rpx solid #F6F6F6;
					.time{
						display: flex;
						color: #656565;
						image{
							width: 30rpx;
						}
						.text1{
							margin-left: 15rpx;
						}
					}
					.addr1{
						margin-top: 15rpx;
						display: flex;
						.flag1{
							margin-top: 10rpx;
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background-color: #02AF57;
						}
						.text1{
							margin-left: 20rpx;
						}
					}
					.addr2{
						margin-top: 15rpx;
						display: flex;
						.left{
							display: flex;
							.flag2{
								margin-top: 10rpx;
								width: 20rpx;
								height: 20rpx;
								border-radius: 50%;
								background-color: #F64E4A;
							}
							.text1{
								margin-left: 20rpx;
							}
						}
						.right{
							margin-left: auto;
							font-size: $uni-font-size-lg;
							font-weight: bold;
						}
					}
				}
				.info3{
					padding-top: 30rpx;
					display: flex;
					.left{}
					.right{
						margin-left: auto;
						.text1{
							line-height: 40rpx;
							padding: 10rpx 20rpx;
							color: #F46C6C;
							border: 1rpx solid #F46C6C;
							border-radius: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
<style>
	page{
		background-color: #F1F5FD;
	}
</style>
